<template>
  <div class="mine">
    <el-avatar :size='200'
               :src='userinfo.headimgurl?userinfo.headimgurl:defAvatarUrl'></el-avatar>
    <el-descriptions title="用户信息"
                     border>
      <el-descriptions-item label="用户名">{{userinfo.username}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{userinfo.phone}}</el-descriptions-item>
      <el-descriptions-item label="城市">{{userinfo.city}}</el-descriptions-item>
      <el-descriptions-item label="学历">
        <el-tag size="medium">{{userinfo.province}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="到期时间">
        <el-tag size="medium"
                effect='dark'>{{userinfo.vipExpires}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="项目地址">{{userinfo.productUrl}}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data() {
      return {
      }
    },
    components: {
    },
    computed: {
      ...mapState(['userinfo'])
    }
  }

</script>

<style lang='scss' scoped>
</style>
